<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>贵州大学校园二手交易平台</title>
 <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
 <link rel="stylesheet" th:href="@{layui/css/user_css.css}">
	<style>
		.line-limit-length {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
		}
	</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-red">
     <div class="layui-logo "><a href="" style="color: #777777;font-size: medium;">贵州大学校园二手交易平台</a></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
    	<li class="layui-nav-item "><a href="" style="color: #000000;">教材书籍</a></li>
    	<li class="layui-nav-item "><a href="" style="color: #000000">电子设备</a></li>
    	<li class="layui-nav-item"><a href="" style="color: #000000">生活用品</a></li>
    	<li class="layui-nav-item"><a href="" style="color: #000000">乐器物品</a></li>
    	<li class="layui-nav-item"><a href="" style="color: #000000">电动单车</a></li>
    	<li class="layui-nav-item"><a href="" style="color: #000000">美妆护理</a></li>
    	<li class="layui-nav-item">
    		<a href="javascript:;" style="color: #000000">维修</a>
    		<dl class="layui-nav-child" style="color: #000000">
    			<dd><a href="">电脑维修</a></dd>
    			<dd><a href="">电动车/单车维修</a></dd>
    			<dd><a href="">衣物缝补</a></dd>
    		</dl>
    	</li>
    </ul>
	

   <ul class="layui-nav layui-layout-right">
   	<li class="layui-nav-item">
   		<a href="javascript:;" style="color:#000000">
   
   			登录
   		</a>
   		<dl class="layui-nav-child">
   			<dd><a href="">基本资料</a></dd>
   			<dd><a href="">安全设置</a></dd>
   		</dl>
   	</li>
   	<li class="layui-nav-item"><a href="" style="color:#000000">注册</a></li>
   </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <!-- <ul class="layui-nav layui-nav-tree"  lay-filter="test"> -->
	  
	  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" >
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">理工科书籍</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:; " >计算机类</a></dd>
       		<dd><a href="javascript:;">数学类</a></dd>
       		<dd><a href="javascript:;">物理类</a></dd>
       		<dd><a href="javascript:;">材料化学类</a></dd>
       		<dd><a href="javascript:;">医学类</a></dd>
       		<dd><a href="javascript:;">电气类</a></dd>
       		<dd><a href="javascript:;">农学园林类</a></dd>
       		<dd><a href="javascript:;">动物科学类</a></dd>
       		<dd><a href="javascript:;">医学类</a></dd>
       	</dl>
       
       </li>
       
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">文科书籍</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:;">法学类</a></dd>
       		<dd><a href="javascript:;">文学类</a></dd>
       		<dd><a href="javascript:;">新闻类</a></dd>
       		<dd><a href="javascript:;">哲学类</a></dd>
       		<dd><a href="javascript:;">历史类</a></dd>
       		<dd><a href="javascript:;">师范类</a></dd>
       		<dd><a href="javascript:;">马克思主义类</a></dd>
       		<dd><a href="javascript:;">政治学类</a></dd>
       		<dd><a href="javascript:;">管理类</a></dd>
       	</dl>
       
       </li>
       
       <li class="layui-nav-item">
       	<a href="javascript:;">艺术科书籍</a>
       	<dl class="layui-nav-child">
       		<dd><a href="">音乐类</a></dd>
       		<dd><a href="">舞蹈类</a></dd>
       		<dd><a href="">播音类</a></dd>
       		<dd><a href="">戏剧类</a></dd>
       	</dl>
       </li>
       
       <li class="layui-nav-item">
       	<a href="javascript:;">电子设备</a>
       	<dl class="layui-nav-child">
       		<dd><a href="">电脑</a></dd>
       		<dd><a href="">手机</a></dd>
       		<dd><a href="">耳机</a></dd>
       		<dd><a href="">音响</a></dd>
       		<dd><a href="">相机</a></dd>
       		<dd><a href="">鼠标</a></dd>
       		<dd><a href="">充电器</a></dd>
       		<dd><a href="">充电宝</a></dd>
       	</dl>
       </li>
       
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">生活用品</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:;">衣物</a></dd>
       		<dd><a href="javascript:;">鞋子</a></dd>
       		<dd><a href="javascript:;">被子床褥</a></dd>
       		<dd><a href="javascript:;">床上桌子</a></dd>
       		<dd><a href="javascript:;">台灯</a></dd>
       		<dd><a href="javascript:;">笔</a></dd>
       		<dd><a href="javascript:;">洗衣液</a></dd>
       		<dd><a href="javascript:;">清洁打扫用具</a></dd>
       	</dl>
       
       </li>
       
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">乐器物品</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:;">吉他</a></dd>
       		<dd><a href="javascript:;">小提琴</a></dd>
       		<dd><a href="javascript:;">风琴</a></dd>
       		<dd><a href="javascript:;">电子琴</a></dd>
       		<dd><a href="javascript:;">萨克斯</a></dd>
       
       	</dl>
       
       </li>
       
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">电动单车</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:;">电动车</a></dd>
       		<dd><a href="javascript:;">单车</a></dd>
       		<dd><a href="javascript:;">摩托车</a></dd>
       	</dl>
       
       </li>
       
       <li class="layui-nav-item layui-nav-itemed">
       	<a href="javascript:;">美妆护理</a>
       	<dl class="layui-nav-child">
       		<dd><a href="javascript:;">口红</a></dd>
       		<dd><a href="javascript:;">粉底</a></dd>
       		<dd><a href="javascript:;">腮红</a></dd>
       		<dd><a href="javascript:;">眼刷</a></dd>
       		<dd><a href="javascript:;">唇膏</a></dd>
       	</dl>
       
       </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
	
	<!-- 搜索功能 -->
	<div class="layui-row layui-col-space3">
		<div class="layui-col-md2" style="width: 400px;margin-left: 300px;">
			<input type="text" id="query" name="q" required lay-verify="required" placeholder="输入关键字" class="layui-input">
		</div>
		<div class="layui-col-md1">
			<button id="btn2" onclick="upd()" class="layui-btn"> 搜索 </button>
		</div>
	</div>
	<!--横线-->
	<hr class="layui-bg-red">
	
	<!--搜索结果-->
	<div id="result">
		<hr class="layui-bg-gray">
	</div>
	<div id="page"></div>
	
	
	
	
	
	<!-- 轮播 -->
	<div class="layui-carousel" id="test1">
		<div carousel-item>
			<div>条目1</div>
			<div>条目2</div>
			<div>条目3</div>
			<div>条目4</div>
			<div>条目5</div>
		</div>
	</div>
	
	<!-- 商品栏 -->
	 <div class="box">
	            <!--一个商品-->
	            <dl th:each="p:${productList.list}" style="margin-left: 50px;margin-bottom: 100px;">
	                <dt>
	                    <a href="#">
	                        <img th:src="${p.getP_href()}"  style="width: 150px;height: 150px;"/>
	                    </a>
	                    <i></i>
	                </dt>
	                <dd>
	                    <p class="line-limit-length"> <a href="#" th:text="${p.getP_Title()}"></a></p>
	                    <span th:text="${p.getP_Price()}"></span>
	                </dd>
	            </dl>


	 </div>
	
	
    <div style="padding: 15px;"></div>
	
	<div  style="margin-bottom: 3px; margin-left: 300px;">

	</div>
  </div>
  
 <!-- <div class="layui-footer">
   
    © layui.com - 底部固定区域
  </div> -->
</div>
<script th:src="@{layui/layui.js}" charset="utf-8"></script>
		<script>
			//JavaScript代码区域
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				//建造实例
				carousel.render({
					elem: '#test1',
					width: '85%' //设置容器宽度
						,
					arrow: 'always' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});
				layui.use('element', function() {
					var element = layui.element;

				});

				function show(highlight, href) {
					//由于为Java集合 的 List 类型、 Array 类型共存，只能这样
					var i = 0;
					$.each(highlight, function(index, title) {
						var a = $("<a></a>").append(title.title[0]).attr("href", href[i].href[0]);
						a.attr("target", "_blank");
						var bq = $("<blockquote class='layui-elem-quote'>").append(a);
						var div = $("<div></div>").append(bq);
						$('#result').append("<hr />").append(div)
						i++;
					});
				}

				function upd() {
					var q = $("#query").val();
					$.ajax({
						type: "get",
						url: "http://localhost/test/select/" + q + "/0/5",
						success: function(result) {
							$('#result').empty()
							var highlight = result.highlight;
							var href = result.href;
							var total = result.total;
							show(highlight, href);
							//分页条再次渲染
							layui.use('laypage', function() {
								//获取页模块
								var laypage = layui.laypage;
								//执行一个laypage实例
								laypage.render({
									//注意，这里的 page 是 ID，不用加 # 号
									elem: 'page',
									//数据总数，从服务端得到
									count: total,
									//每页的数据量
									limit: 5,
									//相连页数量
									groups: 5
								});
							});

						}
					});
				}

			});
		</script>
</body>
</html>